<template>
	<div class="login"> 
		<div class="hd"> 
			<i class="icon iconfont icon-chushimao"></i> 
		</div> 
		<div class="main"> 
			<el-form :model="ruleForm2" status-icon :rules="rules2" ref="ruleForm2" label-width="100px" class="demo-ruleForm"> 
				<el-form-item label="用户名" prop="username"> 
					<el-input type="text" v-model="ruleForm2.username" auto-complete="off"></el-input> 
				</el-form-item> 
				<el-form-item label="密码" prop="pass"> 
					<el-input type="password" v-model="ruleForm2.pass" auto-complete="off"></el-input>
				</el-form-item> 
				<el-form-item label="确认密码" prop="checkPass"> 
					<el-input type="password2" v-model="ruleForm2.checkPass" auto-complete="off"></el-input> 
				</el-form-item>
				<el-form-item label="手机号码" prop="tel"> 
					<el-input type="password2" v-model="ruleForm2.tel" auto-complete="off"></el-input> 
				</el-form-item> 
				<el-form-item align="center" id="btn"> 
					<el-button type="primary" @click="submitForm()"> 注 册 </el-button> <el-button @click="resetForm('ruleForm2')">重置</el-button> 
				</el-form-item> 
			</el-form> 
			<div class="bottom-bar"> 
				<p>吃了么点餐系统隶属于格莱科技旗下产品，最终解释权属于本公司。<br>我有账号<a href="javascript:void(0)" @click="jumpLogin">点击登录</a></p> 
			</div> 
		</div> 
	</div> 
</template>

<script>
	export default{
		data(){
			var validateUser = (rule, value, callback) => { // 验证用户名为空 
				if (value === '') { 
					callback(new Error('请输入用户名'));
				} 
			}; 
			var validatePass = (rule, value, callback) => { // 验证密码为空
				if (value === '') {
					callback(new Error('请输入密码')); 
				}else { 
					if (this.ruleForm2.checkPass !== '') {
						this.$refs.ruleForm2.validateField('checkPass');
					} 
					callback();
				} 
			}; 
			var validatePass2 = (rule, value, callback) => { // 验证密码不一致
				if (value === '') { 
					callback(new Error('请再次输入密码'));
				} else if (value !== this.ruleForm2.pass) { 
					callback(new Error('两次输入密码不一致!')); 
				} else {
					callback(); 
				}
			}; 
			var checkTel = (rule, value, callback) => { // 验证手机号，必须符合规定
				let pattern = /^1[34578]\d{9}$/;   //正则
				if (!value) {
					return callback(new Error('手机号码不能为空')); 
				} 
				if (!pattern.test(value)) {
					return callback(new Error('手机号码格式不正确'));
				}
			}; 
			return { 
				ruleForm2: { 
					username: '', 
					pass: '', 
					checkPass:'', 
					tel:''
				}, 
				rules2: { // Element UI默认表单提示效果
					username: [ 
					    { validator: validateUser, trigger: 'blur' } 
					], 
					pass: [ 
					    { validator: validatePass, trigger: 'blur' }
					], 
					checkPass: [ 
					    { validator: validatePass2, trigger: 'blur' } 
					],
					tel: [ 
					    { validator: checkTel, trigger: 'blur' } 
					]
				}
			};
		},
		methods:{
			submitForm() { // “注册”按钮触发事件 
				if (this.ruleForm2.username=="" || this.ruleForm2.pass=="") {
					this.$message('信息不完整'); 
				} else { 
					this.$http.post('/reg',{ // 验证成功后向服务端发送请求
						username:this.ruleForm2.username, 
						password:this.ruleForm2.pass, 
						usertel:this.ruleForm2.tel 
					}) 
					.then(response=>{ // 处理发送请求成功的状态码 
						this.$message(response.data.errMsg)
						if (response.data.errCode!=0) { 
							this.$message.error(response.data.errMsg)
						} else {
							this.$message(response.data.errMsg)
							this.$router.push('/') // 验证成功后，路由跳转至登录界面
						} 
					}) 
					.catch(error=>{ // 处理发送请求失败，给出提示信息 
						this.$message.error("网络问题，请稍候连接。")
						console.log(error.data)
					}) 
				} 
			}, 
			resetForm(formName) { // 重置表单
				this.$refs[formName].resetFields();
			}, 
			jumpLogin(){ // 跳转至登录页链接设置
				this.$router.push('/') 
			}

		}
	}
</script>

<style scoped>
	.el-form-item{
		padding: 0 275px;
	}
	.bottom-bar{
	text-align: center;
	margin-top: 50px;
    }
    .icon{
    	font-size: 80px;
    	color: #ff9800;
    }
    .hd{
    	text-align: center;
    	margin:30px 0;
    }
    p{
    	line-height: 2em;
    }
    p a{
    	text-decoration:underline;
    }
</style>